<template>
    <div class="my-popover">
        <v-menu :transition="props.transition" :scrim="props.scrim" :content-class="'my-popover-content ' + props.contentClass" :open-on-hover="mobile ? false : props.openOnHover" :location="props.location" :origin="props.origin"
            v-model="isShow" :close-on-content-click="props.closeOnContentClick" :disabled="props.disabled">
            <template v-slot:activator="{ props }">
                <div v-bind="props" class="cursor-pointer">
                    <!-- 触发按钮 -->
                    <slot name="btn">
                        Popover
                    </slot>
                </div>
            </template>
            <template v-slot:default>
                <!-- 内容区域 -->
                <div class="mt-2 mb-2 ml-2 mr-2 my-popover-content-inner">
                    <slot name="default">
                    </slot>
                </div>
            </template>
        </v-menu>
    </div>
</template>

<script lang="ts" setup>
import { ref, watch, onUnmounted } from 'vue';
import { useDisplay } from 'vuetify'
const { mobile } = useDisplay()
import { useCurrentInstance } from "@Hooks/index.ts";
const proxy = useCurrentInstance().proxy;
const props = defineProps({
    disabled: {
        type: Boolean,
        default: false
    },
    closeOnContentClick: {
        type: Boolean,
        default: false
    },
    openOnHover: {
        type: Boolean,
        default: false
    },
    location: {
        default: undefined
    },
    origin: {
        default: undefined
    },
    // 对话框名称
    name: {
        type: String,
        default: ""
    },
    scrim: {
        type: [Boolean, String],
        default: false
    },
    contentClass: {
        type: String,
        default: ""
    },
    transition: {
        type: String,
        default: "scale-transition"
    }
})
// 是否显示
const isShow = ref(false);
const emit = defineEmits(["open", "close"]);
const stopWatch = watch(isShow, function () {
    if (isShow.value == true) {
        emit("open");
        // 添加一个监听方便手动触发，关闭对话框
        if (props.name) {
            proxy.$bus.off(props.name);
            proxy.$bus.on(props.name, function () {
                close();
            })
        }
    } else {
        emit("close");
        // 移除监听
        if (props.name) {
            proxy.$bus.off(props.name);
        }
    }
})
onUnmounted(() => {
    // 移除监听
    stopWatch();
    // 移除监听
    if (props.name) {
        proxy.$bus.off(props.name);
    }
})
/**
 * 关闭对话框
 */
function close() {
    isShow.value = false;
}
/**
 * 显示对话框
 */
function open() {
    isShow.value = true;
}
defineExpose({
    close,
    open
})
</script>

<style>
    .my-popover-content {
        min-width: auto !important;
    }
</style>
